<template>
  <div class="guide">
    <div class="title title_img"></div>
    <div class="title title_text">{{title}}</div>
    <CircleMenu class="circle_menu" />
    <div class="cloud">
      <NumberFalls class="falls1" />
      <NumberFalls class="falls2" />
      <NumberFalls class="falls3" />
      <NumberFalls class="falls4" />
      <NumberFalls class="falls5" />
      <NumberFalls class="falls6" />
      <NumberFalls class="falls7" />
      <FlowLine class="line1" />` `
      <FlowLine class="line2" />
      <FlowLine class="line3" />
      <FlowLine class="line4" />
      <FlowLine class="line5" />
      <FlowLine class="line6" />
      <div class="cloud_item center" @click="skipTo('cloudCenter')">
        中心云
      </div>
       <div class="cloud_item area1" @click="skipTo('cloudArea1')">
        区域云
      </div>
       <div class="cloud_item area2" @click="skipTo('cloudArea2')">
        区域云
      </div>
       <div class="cloud_item edge1" @click="skipTo('cloudEdge1')">
        边缘云
      </div>
       <div class="cloud_item edge2" @click="skipTo('cloudEdge2')">
        边缘云
      </div>
       <div class="cloud_item edge3" @click="skipTo('cloudEdge3')">
        边缘云
      </div>
       <div class="cloud_item edge4" @click="skipTo('cloudEdge4')">
        边缘云
      </div>
    </div>
    <!-- <div class="footer">©2021 国汽大有时空科技（安庆）有限公司 版权所有</div> -->
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getUser } from "../../api/login";
import { useRouter } from "vue-router";
import {message} from 'ant-design-vue';
import CircleMenu from './CircleMenu.vue';
import NumberFalls from './NumberFalls.vue';
import FlowLine from './FlowLine.vue';
const router = useRouter();
const title = ref('智能网联汽车大数据云控基础平台')
getUser().then((res) => {
  if (res.code !== 0) {
    router.replace({ path: "/login" })
  }
})
 const skipTo = (system) =>{
   if(system === 'cloudCenter'){
     window.open(window.location.origin + '#/centercloud', '_blank')
   }else{
    const systemUrl = window.g.guide2[system];
    if(systemUrl) window.open(systemUrl, '_blank');
   }
 }
</script>
<style scoped>
.guide {
  background-image: url(../../../src/assets/images/guide/guide_bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  color: white;
  position: relative;
}
.title {
  position: absolute;
  top: 0;
  width: 100%;
}
.title_img {
  background-image: url(../../../src/assets/images/guide/title.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 21.6%;
  left: -1.38%;
}
.title_text {
  left: 0;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
}
.circle_menu {
  position: absolute;
  width: 128.9vh;
  height: 9.25vh;
  top: 30vh;
  left: calc(50% - 64.45vh);
  border-radius: 50%;
  box-shadow: inset 0px 0px 18px 1px rgba(102, 184, 246, 0.7);
}

.footer {
  width: 100%;
  height: 4.6%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  bottom: 0;
}

.cloud {
  width: 133.6vh;
  height: 46%;
  position: absolute;
  left: calc(50% - 66.8vh);
  bottom: 10.75%;
  background-image: url(../../assets/images/guide/box.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.cloud_item {
  background-image: url(../../assets/images/guide/cloud.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 22.2vh;
  height: 17.6vh;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 2.2vh;
  position: absolute;
  z-index: 10;
  cursor: pointer;
}
.center {
  left: calc(50% - 10vh);
  top: 0;
  background-image: url(../../assets/images/guide/cloud_center.png);
}
.area1,
.area2 {
  background-image: url(../../assets/images/guide/cloud_area.png);
}
.area1 {
  top: 10vh;
  left: 22%;
}

.area2 {
  top: 10vh;
  right: 22%;
}

.edge1 {
  left: 11.3%;
}
.edge2 {
  left: calc(50% - 22.2vh - 15px);
}

.edge3 {
  right: calc(50% - 22.2vh - 15px);
}
.edge4 {
  right: 11.3%;
}
.edge1,
.edge2,
.edge3,
.edge4 {
  bottom: 4vh;
}

.falls1,
.falls2,
.falls3,
.falls4 {
  position: absolute;
  height: 25.3vh;
  bottom: 17vh;
}
.falls1 {
  left: calc(11.3% + 11.1vh - 17.5px);
}

.falls2 {
  left: calc(50% - 11.1vh - 32.5px);
}
.falls3 {
  right: calc(11.3% + 11.1vh - 17.5px);
}

.falls4 {
  right: calc(50% - 11.1vh - 32.5px);
}
.falls5,
.falls6 {
  position: absolute;
  height: 13.6vh;
  top: 0.1vh;
}
.falls5 {
  left: calc(22% + 11.1vh - 17.5px);
}
.falls6 {
  right: calc(22% + 11.1vh - 17.5px);
}
.falls7 {
  position: absolute;
  left: 50%;
  top: 0;
  height: 12vh;
}
.line1,
.line2,
.line3,
.line4,
.line5,
.line6 {
  z-index: 5;
  position: absolute;
}
.line1,
.line2,
.line3 {
  transform: rotate(-45deg);
}
.line4,
.line5,
.line6 {
  transform: rotate(-135deg);
}

.line1 {
  left: calc(11.3% + 15vh);
  bottom: 17.5vh;
  width: 7vh;
}
.line2 {
  left: calc(22% + 18vh);
  top: 16.5vh;
  width: 12vh;
  transform: rotate(-30deg);
}
.line3 {
  right: calc(50% - 21vh - 15px);
  bottom: 17.5vh;
  width: 7vh;
}
.line4 {
  right: calc(11.3% + 15vh);
  bottom: 17vh;
  width: 9vh;
}
.line5 {
  left: calc(50% - 22.2vh - 15px);
  bottom: 17vh;
  width: 9vh;
}
.line6 {
  right: calc(22% + 17vh);
  top: 16.5vh;
  width: 10vh;
  transform: rotate(-150deg);
}
</style>
